<template>
    <el-container class="home-canainer">
        <!-- 头部 -->
        <el-header>
            <div>
                <img src="../assets/images/heima.png" alt="logo">
                <span>后台管理系统</span>
            </div>
            <el-button type="info" @click="logout">退出</el-button>
        </el-header>
        <!-- 页面主题 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200px">
                <Aside />
            </el-aside>
            <!-- 右侧主体 -->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import Aside from './Aside'
import Users from './user/Users'
import Rights from './power/Rights'
import Roles from './power/Roles'
export default {
    methods: {
        logout() {
            window.sessionStorage.removeItem('token')
            this.$router.replace('/login')
        }
    },
    components: {
        Aside,
        Users,
        Rights,
        Roles
    }
}
</script>

<style lang="less" scoped>
.home-canainer {
    height: 100%;
}
.el-header {
    background-color: #373d41;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 20px;
    > div {
        display: flex;
        align-items: center;
        span {
            margin-left: 15px;
        }
    }
}
.el-aside {
    background-color: #333744;
}
.el-main {
    background-color: #eaedf1;
}
</style>
